<template>
  <div class="qualitySafety_container">
    <div class="left_box">
      <div class="box">
        <h6>新渠道占比走势图</h6>
        <div class="top">
          <div class="u2">
            <span :class="isShowG == 0 ? 'one' :'five'"
                  @click="bindClickG(0)">近一年</span>
            <span :class="isShowG == 1 ? 'one' :'five'"
                  @click="bindClickG(1)">近五年</span>
          </div>
        </div>
        <div id="three">
          <LineChart :option="oneOption"></LineChart>
        </div>
      </div>
      <div class="box">
        <h6>国际占比走势图</h6>
        <div class="top">
          <div class="u2">
            <span :class="isShowA == 0 ? 'one' :'five'"
                  @click="bindClickA(0)">近一年</span>
            <span :class="isShowA == 1 ? 'one' :'five'"
                  @click="bindClickA(1)">近五年</span>
          </div>
        </div>
        <div id="three">
          <LineChart :option="towOption"></LineChart>
        </div>
      </div>
      <div class="box">
        <h6>本地采购占比走势图</h6>
        <div class="top">
          <div class="u2">
            <span :class="isShowB == 0 ? 'one' :'five'"
                  @click="bindClickB(0)">近一年</span>
            <span :class="isShowB == 1 ? 'one' :'five'"
                  @click="bindClickB(1)">近五年</span>
          </div>
        </div>
        <div id="three">
          <LineChart :option="threeOption"></LineChart>
        </div>
      </div>
    </div>
    <div class="center_box">
      <div class="center">
        <div class="box">
          <h6>汇总信息</h6>
          <div class="double">
            <ul>
              <li>
                <DoublePie :option="pieChartOne"></DoublePie>
              </li>
              <li>
                <DoublePie :option="pieChartTow"></DoublePie>
              </li>
              <li>
                <DoublePie :option="pieChartThree"></DoublePie>
              </li>
              <li>
                <DoublePie :option="pieChartFour"></DoublePie>
              </li>
              <li>
                <DoublePie :option="pieChartFive"></DoublePie>
              </li>
              <li>
                <DoublePie :option="pieChartSix"></DoublePie>
              </li>
            </ul>
          </div>
        </div>
        <div class="buttom">
          <h6>贸易市场</h6>
          <div class="u2">
            <span :class="isShowH == 0 ? 'one' :'five'"
                  @click="bindClickH(0)">国内贸易</span>
            <span :class="isShowH == 1 ? 'one' :'five'"
                  @click="bindClickH(1)">国际贸易</span>
          </div>
        </div>
        <ChainMap :mapData="mapData"
                  v-if="isShowH == 0"></ChainMap>
        <InternationalityMap v-else></InternationalityMap>
      </div>
    </div>
    <div class="right_box">
      <div class="box">
        <h6>精深加工占比走势图</h6>
        <div class="top">
          <div class="u2">
            <span :class="isShowC == 0 ? 'one' :'five'"
                  @click="bindClickC(0)">近一年</span>
            <span :class="isShowC == 1 ? 'one' :'five'"
                  @click="bindClickC(1)">近五年</span>
          </div>
        </div>
        <div id="three">
          <LineChart :option="fourOption"></LineChart>
        </div>
      </div>
      <div class="box">
        <h6>十大企业占比走势图</h6>
        <div class="top">
          <div class="u2">
            <span :class="isShowD == 0 ? 'one' :'five'"
                  @click="bindClickD(0)">近一年</span>
            <span :class="isShowD == 1 ? 'one' :'five'"
                  @click="bindClickD(1)">近五年</span>
          </div>
        </div>
        <div id="three">
          <LineChart :option="fiveOption"></LineChart>
        </div>
      </div>
      <div class="box">
        <h6>十大品种占比走势图</h6>
        <div class="top">
          <div class="u2">
            <span :class="isShowF == 0 ? 'one' :'five'"
                  @click="bindClickF(0)">近一年</span>
            <span :class="isShowF == 1 ? 'one' :'five'"
                  @click="bindClickF(1)">近五年</span>
          </div>
        </div>
        <div id="three">
          <LineChart :option="sixOption"></LineChart>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { httpOverviewYhree, httpInternationalProportionChart, httpDeepProcessChart, httpTopTenVarietyChart, httpTopTenEnterpriseChart, httpNewChannelChart, httpTradeSummaryChart } from '@/common/api/api'
import LineChart from '../../components/lineChart.vue'
import DoublePie from '../../components/doublePie.vue'
import ChainMap from '../../components/chainMap.vue'
import InternationalityMap from '../../components/internationalityMap.vue'

export default {
  components: {
    LineChart,
    DoublePie,
    ChainMap,
    InternationalityMap
  },
  data () {
    return {
      isShowA: 0,
      isShowB: 0,
      isShowC: 0,
      isShowD: 0,
      isShowF: 0,
      isShowG: 0,
      isShowH: 0,
      oneOption: {
        xAxisData: [],
        yAxisData: [],
        yAxisName: '单位：%',
        lowColor: 'rgba(254, 247, 235, 1)',
        topColor: 'rgba(246, 158, 13, 1)'
      },
      towOption: {
        xAxisData: [],
        yAxisData: [],
        yAxisName: '单位：%',
        lowColor: 'rgba(249, 240, 252, 1)',
        topColor: 'rgba(190, 85, 225, 1)'
      },
      threeOption: {
        xAxisData: [],
        yAxisData: [],
        yAxisName: '单位：%',
        lowColor: 'rgba(243, 250, 236, 1)',
        topColor: 'rgba(110, 199, 30, 1)'
      },
      fourOption: {
        xAxisData: [],
        yAxisData: [],
        yAxisName: '单位：%',
        lowColor: 'rgba(254, 242, 242, 1)',
        topColor: 'rgba(245, 110, 106, 1)'
      },
      fiveOption: {
        xAxisData: [],
        yAxisData: [],
        yAxisName: '单位：%',
        lowColor: 'rgba(242, 249, 253, 1)',
        topColor: 'rgba(100, 183, 236, 1)'
      },
      sixOption: {
        xAxisData: [],
        yAxisData: [],
        yAxisName: '单位：%',
        lowColor: 'rgba(238, 252, 247, 1)',
        topColor: 'rgba(49, 222, 155, 1)'
      },
      pieChartOne: {
        title: '新渠道',
        data: [
          {
            name: "总比",
            value: 78,
            itemStyle: { color: "#487EEA" },
          },
          {
            name: "新渠道",
            value: 22,
            itemStyle: { color: "#F69E0D" },
          },
        ],
      },
      pieChartTow: {
        title: '国际',
        data: [
          {
            name: "总比",
            value: 53,
            itemStyle: { color: "#487EEA" },
          },
          {
            name: "批发市场",
            value: 47,
            itemStyle: { color: "#BE55E1" },
          },
        ],
      },
      pieChartThree: {
        title: '本地采购',
        data: [
          {
            name: "总比",
            value: 43,
            itemStyle: { color: "#487EEA" },
          },
          {
            name: "批发市场",
            value: 57,
            itemStyle: { color: "#6EC71E" },
          },
        ],
      },
      pieChartFour: {
        title: '精深加工',
        data: [
          {
            name: "总比",
            value: 86,
            itemStyle: { color: "#487EEA" },
          },
          {
            name: "批发市场",
            value: 14,
            itemStyle: { color: "#F56E6A" },
          },
        ],
      },
      pieChartFive: {
        title: '十大企业',
        data: [
          {
            name: "总比",
            value: 63,
            itemStyle: { color: "#487EEA" },
          },
          {
            name: "批发市场",
            value: 37,
            itemStyle: { color: "#64B7EC" },
          },
        ],
      },
      pieChartSix: {
        title: '十大品种',
        data: [
          {
            name: "总比",
            value: 5,
            itemStyle: { color: "#487EEA" },
          },
          {
            name: "批发市场",
            value: 95,
            itemStyle: { color: "#31DE9B" },
          },
        ],
      },
      mapData: [
        {
          name: '中国农科院蔬菜花卉所',
          value: [116.072318, 39.951202],
          address: '北京市海淀区中关村南大街12号'
        },
        {
          name: '山东农科院蔬菜所',
          value: [117.174081, 36.685264],
          address: '济南市工业北路202号'
        },
        {
          name: '中国农业科学院寿光蔬菜研发中心',
          value: [118.799718, 36.872315],
          address: '山东省潍坊市寿光市'
        },
        {
          name: '湖南农科院蔬菜所',
          value: [112.944778, 28.288411],
          address: '湖南省长沙市'
        },
        {
          name: '天津科润黄瓜研究所',
          value: [117.231348, 39.035355],
          address: '天津市'
        },
        {
          name: '江苏农科院蔬菜所',
          value: [119.549407, 34.188273],
          address: '江苏省南京市'
        },
        {
          name: '南京农业大学园艺学院',
          value: [118.813516, 32.177271],
          address: '江苏省南京市'
        },
        {
          name: '北京市农林科学院蔬菜研究中心',
          value: [116.661032, 40.795457],
          address: '北京市海淀区中关村南大街10号'
        },
        {
          name: '浙江省农业科学院蔬菜研究所',
          value: [120.156518, 30.312154],
          address: '浙江省杭州市'
        },
        {
          name: '温州市蔬菜科学研究所',
          value: [120.694639, 28.043842],
          address: '浙江省温州市'
        },
        {
          name: '华南农业大学园艺学院',
          value: [113.20234, 23.272654],
          address: '广东省广州市'
        },
        {
          name: '广东省农科院蔬菜研究所',
          value: [115.630783, 23.646068],
          address: '广东省广州市'
        },
        {
          name: '华中农业大学园艺林学学院',
          value: [114.269383, 30.682579],
          address: '湖北省武汉市'
        },
        {
          name: '云南农业大学园林园艺学院',
          value: [102.863059, 24.961246],
          address: '云南省昆明市'
        },
        {
          name: '云南省农科院园艺作物研究所',
          value: [99.220394, 24.726208],
          address: '云南省昆明市'
        },
        {
          name: '上海市农科院园艺所',
          value: [121.481124, 31.253315],
          address: '上海市'
        },
        {
          name: '福建农业大学园艺学院',
          value: [119.273448, 26.162792],
          address: '福建省福州市'
        },
        {
          name: '安徽农业大学园艺学院',
          value: [117.212951, 31.820588],
          address: '安徽省合肥市'
        }
      ],
      localProcurementChartVO: {},
      internationalProportionChart: {},
      deepProcessChart: {},
      topTenVarietyChart: {},
      topTenEnterpriseChart: {},
      newChannelChart: {}
    }
  },
  methods: {
    bindClickA (e) {
      if (e == 0) {
        this.isShowA = e
        this.towOption.xAxisData = this.internationalProportionChart.dateListOneYear
        this.towOption.yAxisData = this.internationalProportionChart.proportionListOneYear
      } else {
        this.isShowA = e
        this.towOption.xAxisData = this.internationalProportionChart.dateListFiveYear
        this.towOption.yAxisData = this.internationalProportionChart.proportionListFiveYear
      }
    },
    bindClickB (e) {
      if (e == 0) {
        this.isShowB = e
        this.threeOption.xAxisData = this.localProcurementChartVO.dateListOneYear
        this.threeOption.yAxisData = this.localProcurementChartVO.proportionListOneYear
      } else {
        this.isShowB = e
        this.threeOption.xAxisData = this.localProcurementChartVO.dateListFiveYear
        this.threeOption.yAxisData = this.localProcurementChartVO.proportionListFiveYear
      }
    },
    bindClickC (e) {
      if (e == 0) {
        this.isShowC = e
        this.fourOption.xAxisData = this.deepProcessChart.dateListOneYear
        this.fourOption.yAxisData = this.deepProcessChart.proportionListOneYear
      } else {
        this.isShowC = e
        this.fourOption.xAxisData = this.deepProcessChart.dateListFiveYear
        this.fourOption.yAxisData = this.deepProcessChart.proportionListFiveYear
      }
    },
    bindClickD (e) {
      if (e == 0) {
        this.isShowD = e
        this.fiveOption.xAxisData = this.topTenEnterpriseChart.dateListOneYear
        this.fiveOption.yAxisData = this.topTenEnterpriseChart.proportionListOneYear
      } else {
        this.isShowD = e
        this.fiveOption.xAxisData = this.topTenEnterpriseChart.dateListFiveYear
        this.fiveOption.yAxisData = this.topTenEnterpriseChart.proportionListFiveYear
      }
    },
    bindClickF (e) {
      if (e == 0) {
        this.isShowF = e
        this.sixOption.xAxisData = this.topTenVarietyChart.dateListOneYear
        this.sixOption.yAxisData = this.topTenVarietyChart.proportionListOneYear
      } else {
        this.isShowF = e
        this.sixOption.xAxisData = this.topTenVarietyChart.dateListFiveYear
        this.sixOption.yAxisData = this.topTenVarietyChart.proportionListFiveYear
      }
    },
    bindClickG (e) {
      if (e == 0) {
        this.isShowG = e
        this.oneOption.xAxisData = this.newChannelChart.dateListOneYear
        this.oneOption.yAxisData = this.newChannelChart.proportionListOneYear
      } else {
        this.isShowG = e
        this.oneOption.xAxisData = this.newChannelChart.dateListFiveYear
        this.oneOption.yAxisData = this.newChannelChart.proportionListFiveYear
      }
    },

    bindClickH (e) {
      if (e == 0) {
        this.isShowH = e
      } else {
        this.isShowH = e
      }
    },
    // 本地采购占比走势图
    getThess () {
      httpOverviewYhree().then(res => {
        const { localProcurementChartVO } = res.data
        this.localProcurementChartVO = localProcurementChartVO
        this.threeOption.yAxisData = localProcurementChartVO.proportionListOneYear
        this.threeOption.xAxisData = localProcurementChartVO.dateListOneYear
      })
    },
    // 国际占比走势图
    getInternational () {
      httpInternationalProportionChart().then(res => {
        const { internationalProportionChart } = res.data
        this.internationalProportionChart = internationalProportionChart
        this.towOption.yAxisData = internationalProportionChart.proportionListOneYear
        this.towOption.xAxisData = internationalProportionChart.dateListOneYear
      })
    },
    // 获取精深加工占比统计图
    getDeepProcessChart () {
      httpDeepProcessChart().then(res => {
        const { deepProcessChart } = res.data
        this.deepProcessChart = deepProcessChart
        this.fourOption.yAxisData = deepProcessChart.proportionListOneYear
        this.fourOption.xAxisData = deepProcessChart.dateListOneYear

      })
    },
    // 获取十大品种占比统计图
    getTopTenVarietyChart () {
      httpTopTenVarietyChart().then(res => {
        const { topTenVarietyChart } = res.data
        this.topTenVarietyChart = topTenVarietyChart
        this.sixOption.yAxisData = topTenVarietyChart.proportionListOneYear
        this.sixOption.xAxisData = topTenVarietyChart.dateListOneYear
      })
    },
    // 获取十大企业占比统计图 
    getTopTenEnterpriseChart () {
      httpTopTenEnterpriseChart().then(res => {
        const { topTenEnterpriseChart } = res.data
        this.topTenEnterpriseChart = topTenEnterpriseChart
        this.fiveOption.yAxisData = topTenEnterpriseChart.proportionListOneYear
        this.fiveOption.xAxisData = topTenEnterpriseChart.dateListOneYear
      })
    },
    // 获取新渠道占比统计图  
    getOverviewYhree () {
      httpNewChannelChart().then(res => {
        const { newChannelChart } = res.data
        this.newChannelChart = newChannelChart
        this.oneOption.yAxisData = newChannelChart.proportionListOneYear
        this.oneOption.xAxisData = newChannelChart.dateListOneYear
      })
    },
    getTradeSummaryChart () {
      httpTradeSummaryChart().then(res => {
        console.log("eewrewrew", res);
        // const { tradeSummaryChartList } = res.data
        // this.pieChartOne.title = tradeSummaryChartList.
      })

    }
  },
  created () {
    this.getInternational(),
      this.getThess(),
      this.getDeepProcessChart(),
      this.getTopTenVarietyChart(),
      this.getTopTenEnterpriseChart(),
      this.getOverviewYhree(),
      this.getTradeSummaryChart()
  },
  mounted () {
  }
}
</script>

<style lang="scss" scoped>
.qualitySafety_container {
  height: 95.26%;
  width: 100%;
  // padding: 0.1875rem 0.375rem;
  display: flex;
  justify-content: space-between;
  .left_box {
    width: calc(100% - 1.56% - 74%);
    height: 100%;
    .box {
      margin-bottom: 0.125rem;
      background-color: #fff;
      padding-top: 0.25rem;
      h6 {
        border-left: 0.05rem solid #487eea;
        padding-left: 0.15rem;
        margin-left: 0.25rem;
      }
      .top {
        position: relative;
        .u2 {
          position: absolute;
          right: 10%;
          bottom: -46;
          z-index: 9999;
          .one {
            width: 1rem;
            height: 0.325rem;
            background: #487eea;
            font-size: 0.175rem;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #ffffff;
            border: 1px solid #e4e4e4;
            text-align: center;
            line-height: 0.325rem;
            border-left-style: none;
            padding: 0.05rem 0.075rem;
          }
          .five {
            width: 1rem;
            height: 0.325rem;
            background: #fff;
            font-size: 0.175rem;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #666666;
            border: 1px solid #e4e4e4;
            text-align: center;
            line-height: 0.325rem;
            padding: 0.05rem 0.075rem;
          }
        }
      }
    }
  }
  .center_box {
    width: 50%;
    padding: 0 0.15rem 0.075rem 0.15rem;
    color: #fff;
    .center {
      background-color: #fff;
      .box {
        background-color: #fff;
        margin-bottom: 0.125rem;
        padding-top: 0.25rem;

        h6 {
          border-left: 0.05rem solid #487eea;
          font-size: 0.225rem;
          color: #000;
          margin-left: 0.25rem;
          padding-left: 0.1125rem;
        }
        .double {
          padding-top: 0.3rem;
          ul {
            display: flex;
            justify-content: space-between;
          }
        }
      }
      .buttom {
        background-color: #fff;
        padding-top: 0.25rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        h6 {
          border-left: 0.05rem solid #487eea;
          font-size: 0.225rem;
          color: #000;
          margin-left: 0.25rem;
          padding-left: 0.1125rem;
        }
        .u2 {
          padding-right: 0.625rem;
          .one {
            width: 1rem;
            height: 0.325rem;
            background: #487eea;
            font-size: 0.175rem;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #ffffff;
            border: 1px solid #e4e4e4;
            text-align: center;
            line-height: 0.325rem;
            border-left-style: none;
            padding: 0.05rem 0.075rem;
          }
          .five {
            width: 1rem;
            height: 0.325rem;
            background: #fff;
            font-size: 14px;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #666666;
            border: 1px solid #e4e4e4;
            text-align: center;
            line-height: 0.325rem;
            padding: 0.05rem 0.075rem;
          }
        }
      }
    }
  }
  .right_box {
    width: calc(100% - 1.56% - 74%);
    height: 100%;
    .box {
      margin-bottom: 0.125rem;
      background-color: #fff;
      padding-top: 0.25rem;
      h6 {
        border-left: 0.05rem solid #487eea;
        padding-left: 0.15rem;
        margin-left: 0.25rem;
      }
      .top {
        position: relative;
        .u2 {
          position: absolute;
          right: 10%;
          bottom: -46;
          z-index: 9999;
          .one {
            width: 1rem;
            height: 0.325rem;
            background: #487eea;
            font-size: 0.175rem;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #ffffff;
            border: 1px solid #e4e4e4;
            text-align: center;
            line-height: 0.325rem;
            border-left-style: none;
            padding: 0.05rem 0.075rem;
          }
          .five {
            width: 1rem;
            height: 0.325rem;
            background: #fff;
            font-size: 0.175rem;
            font-family: Source Han Sans CN;
            font-weight: 500;
            color: #666666;
            border: 1px solid #e4e4e4;
            text-align: center;
            line-height: 0.325rem;
            padding: 0.05rem 0.075rem;
          }
        }
      }
    }
  }
}
</style>
